Node / mirrors / respira / files / src / components / PatternSummaryCard.tsx

Displaying Raw • Download

import { useShallow } from 'zustand/react/shallow';

import { useMachineStore } from '../stores/useMachineStore';

import { usePatternStore } from '../stores/usePatternStore';

import { canDeletePattern } from '../utils/machineStateHelpers';

import { DocumentTextIcon, TrashIcon } from '@heroicons/react/24/solid';

export function PatternSummaryCard() {

// Machine store

const {

machineStatus,

isDeleting,

deletePattern,

} = useMachineStore(

useShallow((state) => ({

machineStatus: state.machineStatus,

isDeleting: state.isDeleting,

deletePattern: state.deletePattern,

}))

);

// Pattern store

const {

pesData,

currentFileName,

} = usePatternStore(

useShallow((state) => ({

pesData: state.pesData,

currentFileName: state.currentFileName,

}))

);

if (!pesData) return null;

const canDelete = canDeletePattern(machineStatus);

return (

<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md border-l-4 border-blue-600 dark:border-blue-500">

<div className="flex items-start gap-3 mb-3">

<DocumentTextIcon className="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />

<div className="flex-1 min-w-0">

<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">Active Pattern</h3>

<p className="text-xs text-gray-600 dark:text-gray-400 truncate" title={currentFileName}>

{currentFileName}

</p>

</div>

</div>

<div className="grid grid-cols-3 gap-2 text-xs mb-3">

<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">

<span className="text-gray-600 dark:text-gray-400 block">Size</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(1)} x{' '}

{((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(1)} mm

</span>

</div>

<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">

<span className="text-gray-600 dark:text-gray-400 block">Stitches</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{pesData.stitchCount.toLocaleString()}

</span>

</div>

<div className="bg-gray-50 dark:bg-gray-700/50 p-2 rounded">

<span className="text-gray-600 dark:text-gray-400 block">Colors</span>

<span className="font-semibold text-gray-900 dark:text-gray-100">

{pesData.uniqueColors.length}

</span>

</div>

</div>

<div className="flex items-center gap-2 mb-2">

<span className="text-xs text-gray-600 dark:text-gray-400">Colors:</span>

<div className="flex gap-1">

{pesData.uniqueColors.slice(0, 8).map((color, idx) => {

// Primary metadata: brand and catalog number

const primaryMetadata = [

color.brand,

color.catalogNumber ? \\`#${color.catalogNumber}\\` : null

].filter(Boolean).join(" ");

// Secondary metadata: chart and description

const secondaryMetadata = [

color.chart,

color.description

].filter(Boolean).join(" ");

const metadata = [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • ");

// Show which thread blocks use this color

const threadNumbers = color.threadIndices.map(i => i + 1).join(", ");

const tooltipText = metadata

? \\`Color ${idx + 1}: ${color.hex}\\n${metadata}\\nUsed in thread blocks: ${threadNumbers}\\`

: \\`Color ${idx + 1}: ${color.hex}\\nUsed in thread blocks: ${threadNumbers}\\`;

return (

<div

key={idx}

className="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600"

style={{ backgroundColor: color.hex }}

title={tooltipText}

/>

);

})}

{pesData.uniqueColors.length > 8 && (

<div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 border border-gray-400 dark:border-gray-500 flex items-center justify-center text-xs font-bold text-gray-600 dark:text-gray-300 leading-none">

+{pesData.uniqueColors.length - 8}

</div>

)}

</div>

</div>

{canDelete && (

<button

onClick={deletePattern}

disabled={isDeleting}

className="w-full flex items-center justify-center gap-2 px-3 py-2.5 sm:py-2 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded border border-red-300 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/30 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"

>

{isDeleting ? (

<>

<svg className="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">

<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>

<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>

</svg>

Deleting...

</>

) : (

<>

<TrashIcon className="w-3 h-3" />

Delete Pattern

</>

)}

</button>

)}

</div>

);

}